Javascript: 3 books in 1 : Javascript Basics For Beginners + Javascript Front End Programming + Javascript Back End Programming by Vickler Andy

Author:Vickler, Andy [Vickler, Andy]
Language: eng
Format: epub, pdf
Published: 2021-03-07T16:00:00+00:00

Using React Refs

React has expanded numerous concepts in the web sphere and one of these is declarative views. Before these, we used to call functions to modify the DOM explicitly. As we mentioned at the start of the chapter, views are now declared based on state, and, although functions are still called to alter the state, we have no control over when or if the DOM will change.

This is called inversion of control and, if we didn’t use refs, we would lose this imperative nature. Here are some uses where refs can work in your code.

Focus Control

Focus can be achieved in an element programmatically. To do this, focus() must be called on the node instance. DOM will expose this as a function call so creating a ref and doing it manually when needed is the best way around this.

import React from "react";

class InputModal extends React.Component {

constructor(props) {

super(props);

this.state = { value: props.initialValue };

}

onChange = e => {

this.setState({ value: e.target.value });

};

onSubmit = e => {

e.preventDefault();

const { value } = this.state;

const { onSubmit, onClose } = this.props;

onSubmit(value);

onClose();

};

render() {

const { value } = this.state;

return (

<div className="modal--overlay">

<div className="modal">

<h1>Insert a new value</h1>

<form action="?" onSubmit={this.onSubmit}>

<input

type="text"

onChange={this.onChange}

value={value}

/>

<button>Save new value</button>

</form>

</div>

</div>

);

}

}

export default InputModal;

This modal lets the user modify values that have already been set. If the input were on focus at the time the modal opens, the user would have a much better experience. Smooth keyboard transitions between the screens could be enabled, and the first thing to do is get an input reference:

import React, { createRef } from "react";

class InputModal extends React.Component {

constructor(props) {

super(props);

this.inputRef = createRef();

this.state = { value: props.initialValue };

}

onChange = e => {

this.setState({ value: e.target.value });

};

onSubmit = e => {

e.preventDefault();

const { value } = this.state;

const { onSubmit, onClose } = this.props;

onSubmit(value);

onClose();

};

render() {

const { value } = this.state;

return (

<div className="modal--overlay">

<div className="modal">

<h1>Insert a new value</h1>

<form action="?" onSubmit={this.onSubmit}>

<input

ref={this.inputRef}

type="text"

onChange={this.onChange}

value={value}

/ >

<button>Save new value</button>

</form>

</div>

</div>

);

}

}

export default InputModal;

When the modal mounts, focus is imperatively called on the input ref:

import React, { createRef } from "react";

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.